<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="org.pr.logoupdate.util.Constant" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Logo加工-第二步</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/step2.js?t=1"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="screen" />
</head>
<body>

<div class="container">
<h3>我们首先要把头像裁剪成正方形</h3>
<div style="position:relative;">
<img alt="" id="originalLogo"
src="servlet/logoDownload?filename=<%=request.getSession().getAttribute(Constant.UPLOAD_FILENAME) %>" class="img-responsive">
<div id="imgOverlay" style="z-index: 20; position:absolute; left: 0px; top: 0px; border: 2px solid green;"
    >
</div>
</div>
<br>
<a class="btn btn-default" href="#" role="button" onclick="enlarge();">变大</a>
<a class="btn btn-default" href="#" role="button" onclick="smaller();">变小</a>
<a class="btn btn-default" href="#" role="button" onclick="leftMove();">左移</a>
<a class="btn btn-default" href="#" role="button" onclick="rightMove();">右移</a>
<a class="btn btn-default" href="#" role="button" onclick="topMove();">上移</a>
<a class="btn btn-default" href="#" role="button" onclick="downMove();">下移</a>
<br><br>
<a class="btn btn-primary" href="#" role="button" onclick="cutFinish();">完成</a>
<a class="btn btn-info" href="index.jsp" role="button">重新上传</a>
</div>
</body>
</html>